<!-- 模板 -->
<template>
  <div class="order">
    <!-- 1.头部 -->
    <div class="header">
      <van-icon
        name="arrow-left"
        class="head-left-icon"
        @click="$router.go(-1)"
      />
      <span class="title">确认订单</span>
    </div>
    <!-- 2.信息 -->
    <div class="info">
      <div class="info-left">
        <div class="name">
          {{ list.name }} <span>{{ list.tel }}</span>
        </div>
        <div class="address">{{ list.address }}</div>
        <p>收货不便时，可选择暂存服务</p>
      </div>
      <van-icon name="arrow" />
    </div>
    <!-- 3.商品 -->
    <div class="goods">
      <div class="goods-head">
        <div class="goods-top">
          <div class="left">
            <img :src="goods.imgUrl" alt="" />
            <div class="text">
              <h3>{{ goods.name }}</h3>
              <p>
                {{ goods.brand ? goods.brand : "颜色：白—大毛圈；尺码：XL" }}
              </p>
            </div>
          </div>
          <div class="right">
            <div class="price">¥ {{ goods.price }}</div>
            <div class="num">x{{ value }}</div>
          </div>
        </div>
        <div class="number">
          <span>购买数量</span>
          <van-stepper v-model="value" />
        </div>
      </div>
      <div class="goods-text">
        <div>
          <div class="item-left">
            <p>配送方式</p>
            <span>普通配送</span>
          </div>
          <div class="item-right">快递免邮<van-icon name="arrow" /></div>
        </div>
        <div>
          <div class="item-left">
            <p>运费险</p>
            <span>卖家赠送，退换货可赔</span>
          </div>
          <div class="item-right"><van-icon name="arrow" /></div>
        </div>
        <div>
          <div class="item-left">
            <p>开具发票</p>
          </div>
          <div class="item-right"><van-icon name="arrow" /></div>
        </div>
        <div>
          <div class="item-left">
            <p>订单备注</p>
            <input type="text" placeholder="选填，请先和商家协商一致" />
          </div>
        </div>
      </div>
    </div>
    <!-- 4.提交订单 -->
    <div class="footer">
      <div class="van-submit-bar">
        <div class="text">
          <span>合计:</span>
          <div class="price">¥{{ goods.price * value }}</div>
        </div>
        <button>提交订单</button>
      </div>
      <!-- <van-submit-bar
        :price="goods.price * value"
        button-text="提交订单"
        decimal-length="0"
        @submit="onSubmit"
      /> -->
    </div>
  </div>
</template>
<script>
import request from "../utils/request.js";
export default {
  name: "",
  data() {
    return {
      value: 1,
      id: 1,
      list: {
        name: "谢健",
        tel: "17354003550",
        address: "安徽省合肥市肥西县桃花镇九龙路115号合肥信息技术职业学院",
      },
      goods: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    //获得id
    getId() {
      let id = sessionStorage.getItem("details-goodsId");
      console.log(id);
      if (!id) {
        id = 1;
      }
      this.id = id;
    },
    async getGoods() {
      let option = {
        url: "users/getByIdGoods",
        type: "get",
        data: {
          id: this.id,
        },
      };
      try {
        let { data: res } = await request(option);
        if (res.meta.status !== 200) {
          return console.log(res.meta.msg);
        }
        this.goods = res.data[0];
        console.log(this.goods);
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {},
  mounted() {
    this.getId();
    this.getGoods();
  },
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.order {
  margin-top: 0.88rem;
  line-height: 1.5;
  background: #e5e5e5;
  padding: 0 0.28rem;
  min-height: 100vh;
  .header {
    position: fixed;
    width: 100%;
    height: 0.88rem;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    background: #e5e5e5;
    z-index: 999;
    .head-left-icon {
      padding-left: 0.2rem;
      font-size: 0.5rem;
      color: #aaa;
    }
    .title {
      padding-left: 0.18rem;
      font-size: 0.32rem;
    }
  }
  .info {
    border-radius: 0.16rem;
    background: #fff;
    height: 1.86rem;
    padding: 0.28rem;
    font-size: 0.28rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info-left {
      width: 85%;
      color: #333;
      line-height: 1.5;
      .name {
        display: flex;
        align-items: center;
        span {
          font-size: 0.24rem;
          color: #666666;
        }
      }
      .address {
        font-size: 0.2rem;
        color: #666666;
        letter-spacing: 0.02rem;
      }
      p {
        color: #fc9550;
        font-size: 0.24rem;
      }
    }
    .van-icon {
      color: #e5e5e5;
      font-size: 0.32rem;
      line-height: 1.5;
    }
  }
  .goods {
    border-radius: 0.16rem;
    margin-top: 0.4rem;
    background: #fff;
    padding: 0.24rem;
    line-height: 1.5;
    .goods-head {
      padding-bottom: 0.24rem;
      border-bottom: 2px solid #c4c4c4;
      .goods-top {
        display: flex;
        justify-content: space-between;
        .left {
          width: 80%;
          display: flex;
          font-size: 0.24rem;
          img {
            width: 1.26rem;
            height: 1.26rem;
            border-radius: 0.1rem;
          }
          .text {
            padding: 0 0.16rem;
            h3 {
              font-weight: 400;
              color: #333;
            }
            p {
              color: #666666;
              font-size: 0.2rem;
            }
          }
        }
        .right {
          font-size: 0.24rem;
          color: #333;
          text-align: right;
          .num {
            font-size: 0.2rem;
            color: #666666;
          }
        }
      }
      .number {
        padding-top: 0.42rem;
        font-size: 0.24rem;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .van-stepper {
          width: 1.62rem;
          height: 0.4rem;
          /deep/button {
            width: 25%;
            height: 0.4rem;
            background: #fff;
            border: 2px solid #c4c4c4;
          }
          /deep/input {
            width: 45%;
            height: 0.4rem;
            font-size: 0.24rem;
            background: #fff;
            border: 2px solid #c4c4c4;
            border-right: none;
            border-left: none;
          }
          /deep/.van-stepper__minus {
            border-top-left-radius: 0.1rem;
            border-bottom-left-radius: 0.1rem;
          }
          /deep/.van-stepper__plus {
            border-top-right-radius: 0.1rem;
            border-bottom-right-radius: 0.1rem;
          }
        }
      }
    }
    .goods-text {
      font-size: 0.24rem;
      > div {
        padding: 0.28rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-left {
          width: 70%;
          display: flex;
          align-items: center;
          p {
            width: 25%;
            color: #333;
          }
          input,
          span {
            color: #666666;
          }
        }
        .item-right {
          .van-icon {
            padding-left: 0.16rem;
            color: #e5e5e5;
            font-size: 0.3rem;
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    .van-submit-bar {
      padding: 0.24rem;
      width: 100%;
      height: 1rem;
      font-size: 0.24rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          color: #333;
        }
        .price {
          padding-left: 0.1rem;
          color: rgb(204, 5, 5);
        }
      }
      button {
        padding: 0.2rem;
        width: 2rem;
        font-size: 0.28rem;
        background: rgb(207, 11, 11);
        color: #fff;
        border-radius: 0.4rem;
      }
    }
  }
}
</style>
